<template>
  <div>
    <div class="main-foods">
      <ul>
        <li v-for="item in recommendList" :key="item">
          <img :src="item.commodity" alt="" />
          <p class="text22">{{ item.title }}</p>
          <p class="price">￥{{ item.price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendList: [
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZShAH.png",
          title: "渴望 原味鸡肉配方狗粮 1KG/2KG/6KG/11.4KG",
          price: "759",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZS54A.png",
          title: "ziwi巅峰 恣意风干无骨鸡肉狗粮 454g/1KG/2.5Kg/4Kg",
          price: "215",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZSWHe.png",
          title: "开饭了 鲜肉小芳牛肉鸡肉枸杞子 全家圈圈狗追 190g/8",
          price: "165",
        },
        {
          commodity: "https://z3.ax1x.com/2021/07/14/WZS4Nd.png",
          title:
            "豆柴 冻干双拼狗粮蛋黄肌肉里 泰迪比熊科技 小众大型成犬通用粮 1.5KG",
          price: "240",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
// 口碑推荐四张图片排版
.main-foods {
  ul {
    width: 100%;
    // height: 168px;
    display: flex;
    justify-content: space-around;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    text-align: center;
    li {
      margin-left: 5px;
      img {
        width: 70px;
        height: 70px;
        margin: 15px 0;
      }
      .text2 {
        color: #000;
        // font-weight: bolder;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
      .text22 {
        color: #000;
        width: 70px;
        font-size: 14px;
        // font-weight: bolder;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
      }
      .price {
        color: red;
        margin: 10px 0;
      }
    }
  }
}
</style>
